
<template>
     <el-date-picker
        ref="myDatetime"
     v-if="showType=='element'"
      :style="styleNew"
      v-model="currentValue"
      :id="id"
      :editable="false"
      type="datetime"

      value-format="yyyy-MM-dd HH:mm"
      placeholder="选择日期">
    </el-date-picker>
    <div  v-else-if="showType=='dateAndTime'" style="width:100%;display:flex;flex-direction: row;">
        <DatePicker type="date"    
            ref="myDatetime"
            style="flex:1"
        placeholder="选择日期"
        :id="id"
        format="yyyy-MM-dd"
        :options="options1"
        :style="styleNew"
        :readonly="disabled"
        :class="classs"
        :transfer="true"
        :value="valueDate"
        @on-change="changeDate"
        @on-open-change="openChange"
        ></DatePicker>
        <TimePicker type="time" v-model="time" format="HH:mm" placeholder="选择时间" style="width: 160px;margin-left:10px" />
    </div>
   
    <DatePicker type="datetime"  v-else
        ref="myDatetime"
      placeholder="选择日期"
      :id="id"
      format="yyyy-MM-dd HH:mm"
      :options="options1"
      :style="styleNew"
      :readonly="disabled"
      :class="classs"
      :transfer="true"
      :value="valueDate"
       @on-change="changeDate"
       @on-open-change="openChange"
     ></DatePicker>

</template>
 
<script>
    export default {
        props:['id','styles','value','data','index','dataField','isBorder','exkey','isreadonly','fontSize'],
        name: "input-datetime",
        data(){
            return {
                options1: {
                    
                },
                currentValue:this.value,
                pId:"",
                classs:'',
                cId:"",
                styleNew:"width:100%;",
                first:'Y',
                currentValueOld:'',
                valueDate:"",
                showType:"design",
                disabled:false,
                minDataField:"",
                maxDataField:"",
                time:"",
                date:""
            }
        },
        created(){
            if(this.fontSize){
                let fontSize="font-size:"+this.fontSize+";";
                this.styleNew=fontSize+this.styleNew;
            }
            if(localStorage.getItem("sCode")=='kmxbyg'){
                this.showType="element"
            }else{
                if(this.exkey&&this.exkey.showType){
                    this.showType=this.exkey.showType;
                }
            }
            //alert(this.showType);
            if(this.isreadonly=="Y"){
                this.disabled=true;
            }
             try{
                //console.log("readOnlyGroup========"+this.exkey.readOnlyGroup)
                if(this.exkey.readOnlyGroup){
                    let readOnlyGroup=this.exkey.readOnlyGroup;
                    let groupName=sessionStorage.getItem("groupName");
                    if(readOnlyGroup!=groupName){
                        this.disabled=true;
                    }
                }
                //console.log("readOnlyGroup22========"+this.exkey.readOnlyGroup+"=="+this.disabled)
            }catch(e){}
            
             try{
                if(this.exkey.minDataField){
                    this.minDataField=this.exkey.minDataField;
                }
            }catch(e){}
            try{
                if(this.exkey.maxDataField){
                    this.maxDataField=this.exkey.maxDataField;
                }
            }catch(e){}
            this.setData();
            let that=this;
            this.options1={
                disabledDate (date) {
                    let isOk=false;
                    if(that.minDataField){
                        let minData="";
                        if(that.index!=""&&(that.index==0||that.index>0)){
                            minData=that.data[that.pId][that.index][that.minDataField];
                        }else{
                            minData=that.data[that.pId][that.minDataField];
                        }
                        
                        
                        var startTime = new Date(Date.parse(minData));
                        date=date.setDate(date.getDate()+1);
                        date=new Date(date);
                        if(date<startTime){
                            isOk=true;
                        }
                    }
                    if(that.maxDataField){
                        let minData="";
                        if(that.index!=""&&(that.index==0||that.index>0)){
                            minData=that.data[that.pId][that.index][that.maxDataField];
                        }else{
                            minData=that.data[that.pId][that.maxDataField];
                        }
                        
                        var startTime = new Date(Date.parse(minData));
                        date=date.setDate(date.getDate()+1);
                        date=new Date(date);
                        if(date>startTime){
                            isOk=true;
                        }
                    }
                    return isOk;
                }
            }
        },
        mounted(){
            
            try{
                this.$refs.myDatetime.$parent.$parent.$children[0].$el.style.fontSize=this.fontSize
            }catch(e){}
        },
        methods:{
            changePost(){
                
                if(this.exkey&&this.exkey.changePost){
                        let url=this.exkey.changePost.url;
                        let params=this.exkey.changePost.params;
                        let paramss={};
                        let setData=this.exkey.changePost.setData;

                        let isOk=true;
                        params.forEach(item=>{
                            let key =item.key;
                            let field=item.field.split(",");
                            let isEmpty=item.isEmpty;
                            let pre=item.pre;
                            let val="";
                            field.forEach(ff=>{
                            let val_= this.data[pre][ff]
                            val+=val_;
                            })
                            if(isEmpty=="N"&&!val){
                                isOk=false;
                            }
                            paramss[key]=val;
                        })
                        if(isOk){
                            this.$post("",url,paramss).then(data=>{
                                setData.forEach(item=>{
                                    let dstField=item.dstField.split(".");
                                    let srcField=item.srcField;
                                    this.$set(this.data[dstField[0]],dstField[1],data[srcField]);
                                })
                            })
                        }
                    }
            },
            setData(){
                 if(this.isBorder=='N')
                    this.classs="no-border";
                 if(!this.value){
                    let ids=this.id.split(".");
                    if(ids.length>1){
                        let p=ids[0];
                        let id_=ids[1];
                        this.pId=p;
                        this.cId=id_;
                        if(this.index||this.index=='0'){
                            try{
                                this.currentValue=unescape(this.data[p][this.index][id_]);
                            }catch(e){}
                        }else{
                            try{
                                this.currentValue=unescape(this.data[p][id_]);
                            }catch(e){}
                        }
                    }else{
                        if(this.dataField){
                            this.currentValue=unescape(this.data[this.dataField][this.index][this.id]);
                        }else{
                            if(this.index!=""&&(this.index==0||this.index>0)){
                                this.currentValue= unescape(this.data[this.index][this.id]);
                            }else if(this.data[this.id])
                                this.currentValue= unescape(this.data[this.id]);
                        }
                        
                       
                    }
                    if(!this.style){
                        this.style="width:180px"
                    }
                }else{
                    
                    let data={};
                    data.id=this.id;
                    data.val=this.value;
                    data.index=this.index;
                    this.$emit('input',JSON.stringify(data));
                }
                
               this.valueDate=this.currentValue;
               if(this.showType=="dateAndTime") {
                 
                 if(this.currentValue&&this.currentValue.length>=10){
                    this.date=this.currentValue.substring(0,10);
                 }
                 if(this.currentValue&&this.currentValue.length>=16){
                    
                    this.time=this.currentValue.substring(11)
                   // alert(this.currentValue+"=="+this.time)
                 }
                 
               }
            },
            changeDate(date){
              
               /*let year=date.getFullYear();
               let month=date.getMonth()+1;
               let day=date.getDate();
               if(month<10){
                   month="0"+month;
               }
               if(day<10){
                   day="0"+day;
               }
               let days=year+"-"+month+"-"+day;*/
               if(this.minDataField){
                    let minData="";
                    if(this.index!=""&&(this.index==0||this.index>0)){
                        minData=this.data[this.pId][this.index][this.minDataField];
                    }else{
                        minData=this.data[this.pId][this.minDataField];
                    }
                    
                    
                    var startTime = new Date(Date.parse(minData));
                    var endTime = new Date(Date.parse(date));
                    if(endTime<startTime){
                        this.currentValue="";
                        this.$message.error('结束日期不能小于开始日期');
                        return;
                    }
                }
                if(this.showType=="dateAndTime")
                    this.currentValue=date+" "+this.time;
                else{
                    this.currentValue=date
                }
               this.date=date;
           },
           openChange(value){
              if(value){
                  let elems=document.getElementsByClassName("ivu-select-dropdown");
                  for(let i=0;i<elems.length;i++){
                      elems[i].style.zIndex="9999 !important"
                  }
                  
              }
           },
           validate(){
            if(this.showType=="dateAndTime"){
               
                let msg="";
                if(!this.date||!this.time){
                    msg=this.exkey.errorMsg
                }
                return msg;
            }
           }
        },
        watch:{
            currentValue: function (val) { //currentValue值变动就向父组件传值
                if(!val){
                    val="";
                }
               
                try{
                    if(this.exkey.defaultHour){
                        val=val.replace("00:00",this.exkey.defaultHour)
                    }
                }catch(e){}
                 if(this.first=='Y'){
                    this.currentValueOld=this.currentValue;
                    this.first='N';
                }
                if(this.currentValueOld==this.currentValue){
                    return;
                }
                this.GLOBAL.isChange=true;
                let data={};
                data.id=this.id;
                data.val=val;
                data.index=this.index;
               // this.$emit('input',JSON.stringify(data));
                //this.$emit('on-change',JSON.stringify(data));
                
               
                 if(this.pId){
                     if(this.index!=""&&(this.index==0||this.index>0)){
                        let data_=this.data[this.pId][this.index];
                        data_[this.cId]=val;
                        this.$set(this.data[this.pId],this.index,data_)
                    }else
                        this.$set(this.data[this.pId],this.cId,val)
                }else if(this.dataField){
                    let data_=this.data[this.dataField][this.index];
                    data_[this.id]=val;
                    this.$set(this.data[this.dataField],this.index,data_);
                }else{
                    this.$set(this.data,this.id,val)
                }
                this.$emit("changeDate",this.currentValue)
                this.changePost();
            },
            value:function (val) { //对值进行验证0
                
            },
            time:function(val){
                this.time=val;
                this.currentValue=this.date+" "+this.time;
                //alert(this.currentValue)
            },
            data:{
                handler: function (newVal) {
                    this.setData()
                },      
                deep: true    //深度监听
            }
        }
    }
</script>
<style scoped>
.formitem{
    margin-left:35px;
}
.formitem2{
    margin-left:10px;
}
</style>
<style >
.el-date-table td.today span{
    
   font-size:18px;
}
.el-date-table td, .el-date-table td div{
    height:20px  !important;  
}
.el-picker-panel__content th{
    background:#409EFF;
    color:#fff !important;  
}
.el-picker-panel__content table{
    border:1px solid #409EFF;
}
.el-date-picker__time-header{
    background:#409EFF;
}
.el-picker-panel el-date-picker el-popper{
    background:#409EFF;
}
</style>